import React from 'react';
import { PageLoading } from '@/components';
import { Redirect, connect } from 'umi';
import { stringify } from 'querystring';
import { isLogin } from '@/utils/common';


class SecurityLayout extends React.Component {
  state = {
    isReady: false,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    this.setState({
      isReady: true,
    });
    if (dispatch && isLogin()) {
      dispatch({
        type: 'menu/queryMenuData', // 获取菜单权限
      });
      dispatch({
        type: 'user/fetchCurrent',
      })

    }
  }

  render() {
    const { isReady } = this.state;
    const { children, loading, menuLoading } = this.props; // You can replace it to your authentication rule (such as check token exists)
    // 你可以把它替换成你自己的登录认证规则（比如判断 token 是否存在）
    const isLogined = isLogin();
    const queryString = stringify({
      redirect: window.location.href,
    });

    // 未登录
    if (!isLogined && window.location.pathname !== '/login') {
      return <Redirect to={`/login?${queryString}`} />;
    }

    // 数据还未加载完成
    if (loading || menuLoading || !isReady) {
      return <PageLoading />;
    }

    return children;
  }
}

export default connect(({ user, loading, menu }) => ({
  currentUser: user.currentUser,
  loading: loading.models.user,
  menuLoading: loading.effects['menu/queryMenuData']
}))(SecurityLayout);
